<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import GeoJSON from 'ol/format/GeoJSON';
    import {DragBox} from 'ol/interaction';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {platformModifierKeyOnly} from "ol/events/condition";

    export default {
        name: 'DragBoxInteraction',
        data() {
            return {}
        },
        mounted() {
            const vector = new VectorLayer({
                source: new VectorSource({
                    url: 'http://localhost:8888/openlayer/geojson/countries.geojson',
                    format: new GeoJSON(),
                }),
            });

            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vector
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 2,
                })
            });


            //添加拖拽盒子
            // DragBox允许用户在地图上拉一个矩形进行操作
            // 如拖拽一个矩形可以对地图进行放大
            let dragBox = new DragBox({
                condition: platformModifierKeyOnly,
                minArea:1000,
                onBoxEnd:this.onBoxEnd
            });
            this.map.addInteraction(dragBox);
        },
        methods: {
            onBoxEnd(){
                console.log("onBoxEnd")
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
